<template>
  <div class="contact_us">
    <QxHead @showModal="showMenuModal"></QxHead>
    <Menu :showModal="showModalFlag" @handleHideModal="handleHideModal" @getMenuList="getMenuList" @handleChangeLan="handleChangeLan"/>
    <div class="contact_img">
      <img :src="bannerImage" alt="" v-if="lang == 'zh'">
      <img src="http://qiaoxin.oss-cn-shenzhen.aliyuncs.com/img/groupDisplay/lianxi.png" alt="" v-else>
    </div>
    <ul class="contact_list">
      <li class="flex-box-align">
        <img src="../images/phone.png" alt="">
        <div class="flex commonDiv">
          <p>TEL</p>
          <p>(86)0755-82786366</p>
        </div>
        <a href="tel:(86)0755-82786366">{{lang == 'zh' ? '拨打' : 'Call'}}</a>
      </li>

      <li class="flex-box-align">
        <img src="../images/printer.png" alt="">
        <div class="flex commonDiv">
          <p>FAX</p>
          <p>(86)0755-82786767</p>
        </div>
        <a></a>
      </li>

      <li class="flex-box-align">
        <img src="../images/mail.png" alt="">
        <div class="flex commonDiv">
          <p>EMAIL</p>
          <p>qiaoxin@qiaoxinsz.com</p>
        </div>
        <!--<a href="mailto:qiaoxin@qiaoxinsz.com">发邮件</a>-->
      </li>

      <li>
        <div class="flex-box-align" style="margin-bottom: .35rem;">
          <img src="../images/location.png" alt="">
          <div class="flex commonDiv">
            <p>ADD</p>
            <p v-if="lang== 'en'">
              3A7, Building 3, Qiaoxiang Mansion, No. 3028, Qiaoxiang Road, Xiang'an Community, Xiangmihu Street, Futian District, Shenzhen
            </p>
            <p v-else="lang=='zh'">
              深圳市福田区香蜜湖街道香安社区侨香路3028号侨香公馆3栋3A7
            </p>
          </div>
        </div>
        <a href="https://uri.amap.com/marker?position=114.006656,22.544427&name=侨香公馆">
          <p id="container" style="width: 5.89rem;height: 2.53rem;margin-left: .95rem;"></p>
        </a>
      </li>
    </ul>
    <BottomInfo />
  </div>
</template>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?0c6b7133f8b076c80f30ef205bddbfab";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
  import { SwiperItem, Swiper } from 'vux'
  import BottomInfo from "./common/bottomInfo";
  import QxHead from "./common/qxHead";
  import Menu from "./common/menu";

  let CONSTANT = require('../../wechat/static/constant/constant.js'),
    common = require("../../wechat/static/common/common.js");
  require("../../wechat/static/util/map.js")

  export default {
    components: {
      SwiperItem,
      Swiper,
      BottomInfo,
      QxHead,
      Menu
    },
    data() {

      return {
          lang: "",
        showModalFlag: false,
        groupBusiList: [{
          img: require("../images/busi_estate.png")
        },{
          img: require("../images/busi_construction.png")
        }, {
          img: require("../images/busi_aviation.png")
        }, {
          img: require("../images/busi_investment.png")
        }, {
          img: require("../images/busi_logistics.png")
        }, {
          img: require("../images/busi_cloud.png")
        }],
        bannerImage: ""
      }
    },
    mounted() {
        this.lang = this.$i18n.locale

      var map = new AMap.Map('container', {
        center:[114.006656, 22.544427],
        zoom:15,
        resizeEnable: true,
      });

      var marker1 = new AMap.Marker({
          map: map,
          position: [114.006656, 22.544427],
      });
      marker1.on("click", () => {
          marker1.markOnAMAP({
              position: marker1.getPosition(),
              name: "侨香公馆"
          })
      })

    },
    methods: {
      getMenuList(data) {
          data.map( item => {
              if (item.link == location.pathname) {
                  this.bannerImage = "https://qiaoxin.oss-cn-shenzhen.aliyuncs.com"+item.banner_image
              }
          })
      },
      showMenuModal(bool) {
        this.showModalFlag = bool
      },
      handleHideModal(bool) {
        this.showModalFlag = bool
      },
      addMarker(map) {
        var marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [114.006656, 22.544427],
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
      },
        handleChangeLan() {
          this.lang = this.$i18n.locale
        }
    }
  };
</script>
<style lang="less">
  .contact_us {
    /*padding-bottom: 1.31rem;*/
    .contact_img {
      margin-bottom: .13rem;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .contact_list {
      li {
        padding: .44rem 0;
        margin: 0 .28rem 0 .38rem;
        border-bottom: 1px solid #f7f7f7;
        img {
          width: .53rem;
          vertical-align: middle;
        }
        div.commonDiv {
          margin-left: .42rem;
          font-size: .31rem;
          p{
            &:first-child {
              color: #888;
              margin-bottom: .15rem;
            }
          }
        }
        a {
          color: #5283CB;
          font-size: .31rem;
          display: inline-block;
        }
      }
    }
  }
</style>

